<div class="modal fade addKeyWordWin" id="taskProductList" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="taskListThemeTabsLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" style="width: 1000px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="taskListThemeTabsLabel">分配产品标引任务</h4>
                <button type="button" class="close" data-dismiss="modal" (click)="clearData();">&times;</button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="PI-keyWordBox" style="height:480px;">
                        <div class="row">
                            <!-- 左侧同义词搜索 BEGIN -->
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 PI-keyWord-Left">
                                <p>产品分类</p>
                                <div class="row treeview treeviewBox" style="height:397px">
                                    <div id="tree" class="treeview" style="overflow: scroll;">
                                        <div class="tree-box">
                                            <p class="mogami cursor" [ngClass]="{'active':treeTopActive}" style="background: transparent;;padding-left: 0px;">
                                                <span (click)="toMogami()">全部</span>
                                            </p>
                                            <p-tree class="tree-public" [value]="treeData" selectionMode="multiple" [(selection)]="selectedFile" (onNodeSelect)="selectNode($event, 'categoryId')"
                                                [style]="{'width':'100%'}">
                                                <ng-template let-node pTemplate="default">
                                                    <span [class.red]="node.name.indexOf('已禁用')!=-1">{{ node.name }}</span>
                                                </ng-template>
                                            </p-tree>
                                            <div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 左侧同义词搜索 END -->

                            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 PI-keyWord-Right" style="height:470px" id="div-product-pagin">
                                <div class="row txtTitle">
                                    <input matInput type="text" class="input_style" #queryCriteria="ngModel" name="searchData" (input)="changesearch()" (keydown.enter)="changesearch()"
                                        placeholder="请输入词语名称检索" [(ngModel)]="searchData" />
                                    <button class="btn btn-search btn-blue" style="margin-right: 10px;" (click)="search()" mat-button>查询
                                    </button>
                                </div>
                                <!-- 表格 BEGIN -->
                                <div class="table-thead">
                                    <table class="tableStyle table table-hover table-striped">
                                        <thead>
                                            <tr>
                                                <th class="w5 text-center">
                                                    <input type="checkbox" #event (click)="_selectAll(event.checked,tabVal)" [checked]="isSelectAll">
                                                </th>
                                                <th class="w5 text-center max-w">序号</th>
                                                <th class="w30 text-left max-w">图书名称</th>
                                                <th class="w10 text-left max-w">作者</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                                <div class="table-tbody product-table-tbody">
                                    <table class="tableStyle table table-hover table-striped">
                                        <tbody>
                                            <tr *ngFor="let val of tabVal;let i = index">
                                                <td class="bs-checkbox w5 text-center">
                                                    <input type="checkbox" #event (click)="_chose(event.checked,val.productId,tabVal.length)" [checked]="isChose || val.checked">
                                                </td>
                                                <td class="w5 text-center">{{ i+1 }}</td>
                                                <td class="w30 text-left max-w" [title]="val.name">{{ val.name }}</td>
                                                <td class="w10 text-left max-w" [title]="val.author">{{ val.author }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- </div> -->
                                <!-- 表格 END -->

                                <!-- 分页 BEGIN -->
                                <app-pagination #pagination [getTotalItems]="total" (isLoadTableFromPagination)="_pagination($event)">
                                </app-pagination>   
                                <!-- 分页 END -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" [disabled]="!selectedProduct || selectedProduct.length < 1" (click)="addTaskProduc();">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" (click)="clearData();">取消</button>
            </div>
        </div>
    </div>
</div>